<template>
    <!-- 市政消火栓管理 -->
    <div class="hydrant-manage-wrap">
      <el-row class="overview-wrap" :gutter="40">
        <el-col :span="8">
          <div class="item-wrap">
            <p class="item-value color-4">{{totalNum}}</p>
            <p class="item-title">市政消火栓总数</p>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="item-wrap">
            <p class="item-value color-4">{{usableNum}}</p>
            <p class="item-title">可用总数</p>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="item-wrap">
            <p class="item-value color-4">{{unUsableNum}}</p>
            <p class="item-title">不可用总数</p>
          </div>
        </el-col>
      </el-row>
      <el-row type="flex" justify="space-between">
        <el-form class="serach-form" ref="searchForm" :model="searchForm" :inline="true" @submit.native.prevent>
          <el-form-item>
            <el-select v-model="searchForm.status" placeholder="请选择状态">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-input v-model="searchForm.name"  placeholder="请输入消火栓名称"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button class="form-search-btn" type="primary" @click="getTableData(1)">查询</el-button>
          </el-form-item>
        </el-form>
        <div class="more-btns">
          <el-button type="primary" :span="4" @click="addMunicipalHydrant">新增</el-button>
          <el-dropdown @command="handleCommand">
            <span class="el-dropdown-link">
                        更多<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="1">下载模板</el-dropdown-item>
              <el-dropdown-item command="2">批量导入</el-dropdown-item>
              <!-- <el-dropdown-item command="3">批量导出</el-dropdown-item> -->
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-row>
      <el-table
        v-loading="loading"
        ref="multioleUnitsTableList"
        :data="tableData"
        style="width: 100%" id="tableView">
        <el-table-column label="序号" type="index" width="50"></el-table-column>
        <el-table-column label="图片" prop="orgName" width="100">
          <template v-if="scope.row.url != ''" slot-scope="scope">
            <img :src="scope.row.url.split(',')[0]" width="50px" height="50px" @click="$imgPreview" :data-imgpreview="scope.row.url">
          </template>
        </el-table-column>
        <el-table-column label="市政消火栓名称" prop="name"></el-table-column>
        <el-table-column label="位置" prop="location"></el-table-column>
        <el-table-column label="经度" prop="lon"></el-table-column>
        <el-table-column label="纬度" prop="lat"></el-table-column>
        <el-table-column label="口径" prop="caliber"></el-table-column>
        <el-table-column label="可用状态" prop="status" :formatter="formatStatus"></el-table-column>
        <el-table-column label="关联探测器" prop="fcfName"></el-table-column>
        <el-table-column label="创建日期" prop="createTime"></el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button @click="editMunicipalHydrant(scope.row)" type="text" size="small">编辑</el-button>
            <span class="dividing-line">|</span>
            <el-button @click="deleteHydrant(scope.row)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-sizes="[10, 50, 100]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
      <!-- 新增/编辑资产弹框 -->
      <el-dialog
        :close-on-click-modal="false"
        :title="dialogTitle"
        width="600px"
        top='10vh'
        v-if="dialogBaseInfo"
        :visible.sync="dialogBaseInfo"
        @close="closeHydrantInfo"
        v-dialogDrag>
        <hy-drant-info :oldInfo="hydrantInfo" :closeFun="closeHydrantInfo"></hy-drant-info>
      </el-dialog>
      <!-- 导入选择单位 -->
      <el-dialog
        :close-on-click-modal="false"
        :title="dialogTitleTwo"
        width="600px"
        top='2vh'
        v-if="dialogBaseInfoTwo"
        :visible.sync="dialogBaseInfoTwo"
        @close="closeHydrantInfo"
        v-dialogDrag>
        <import-gydrant-file :closeFun="closeHydrantInfo"></import-gydrant-file>
      </el-dialog>
    </div>
</template>
<style lang="scss">
.hydrant-manage-wrap {
  .more-btns {
    height: 40px;
    .el-dropdown {
      margin-left: 20px;
      padding: 0 10px;
      height: 40px;
      line-height: 40px;
      border: 1px solid #409EFF;
      border-radius: 3px;
    }
  }
}
</style>

<script>
import {getMunicipalHydrant,statisticsMunicipalHydrant,deleteMunicipalHydrant} from '@/api/sysConfig'
import HyDrantInfo from './Dialog/HydrantInfo'
import ImportGydrantFile from './Dialog/ImportGydrantFile'

export default {
  name: 'HydrantManage',
  components: {
    HyDrantInfo,
    ImportGydrantFile
  },
  data () {
    return {
      options: [{
        value: '-1',
        label: '全部状态'
      }, {
        value: '0',
        label: '可用'
      }, {
        value: '1',
        label: '不可用'
      }],
      value: '',
      loading: true,
      searchForm: {
        name: '',
        status: "-1"
      },
      tableData: [],
      // 分页
      currentPage: 1,
      pageSize: 10,
      total: 0,
      totalNum: 0,
      usableNum: 0,
      unUsableNum: 0,
      // 弹框信息
      dialogTitle: '',
      dialogBaseInfo: false,
      hydrantInfo: {},
      /*批量导入-弹框*/
      dialogBaseInfoTwo:false,
      dialogTitleTwo:'',
    }
  },
  created() {
    let that = this
    that.getStatisticsMunicipalHydrant()
  },
  methods: {
    getStatisticsMunicipalHydrant(){
      let that =this
      that.loading = true
      let parames = {
        orgIds: that.$store.state.userinfo.organizationIds
      }
      // 获取统计信息
      statisticsMunicipalHydrant(parames).then(res => {
        that.totalNum = res.data.totalNum
        that.usableNum = res.data.usableNum
        that.unUsableNum = res.data.unUsableNum
        that.getTableData()
      })
    },
    getTableData(pageIndex, pageSize) {
      let that = this
      if (pageIndex) {
        that.currentPage = pageIndex
      }
      if (pageSize) {
        that.pageSize = pageSize
      }
      let parames = {
        orgIds: that.$store.state.userinfo.organizationIds,
        name: that.searchForm.name,
        pageSize: that.pageSize,
        status: that.searchForm.status,
        pageIndex: that.currentPage - 1
      }
      // 获取列表信息
      getMunicipalHydrant(parames).then(res => {
        that.tableData = res.data
        that.total = res.total
        that.loading = false
      })
    },
    handleSizeChange (pageSize) {
      this.getTableData(1, pageSize)
    },
    handleCurrentChange (currentPage) {
      this.getTableData(currentPage)
    },
    // 新增
    addMunicipalHydrant () {
      let that = this
      that.dialogTitle = '新增消火栓'
      that.hydrantInfo = {}
      that.dialogBaseInfo = true
    },
    // 编辑
    editMunicipalHydrant (row) {
      let that = this
      that.dialogTitle = '编辑消火栓'
      that.hydrantInfo = row
      that.dialogBaseInfo = true
    },
    // 删除
    deleteHydrant (row) {
      let that = this

      that.$confirm('确定删除该消火栓吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        roundButton: true
      }).then(() => {
        deleteMunicipalHydrant({id: row.id}).then(res => {
          if (res.status === 200) {
            that.$message({
              type: 'success',
              message: '删除成功!'
            })
            that.getStatisticsMunicipalHydrant()
          } else {
            that.$message.error(res.info)
          }
        })
      }).catch(() => {

      })
    },
    // 关闭弹框
    closeHydrantInfo (flag) {
      let that = this
      if(that.dialogBaseInfo)
        {that.dialogBaseInfo = false}
      if(that.dialogBaseInfoTwo)
      that.dialogBaseInfoTwo = false;
      if (flag) {
        that.getStatisticsMunicipalHydrant()
      }
    },

    /* 更多操作 */
    handleCommand(command) {
      var that = this;
      /* 下载模板 */
      if(command == '1') {
        window.location.href= that.GLOBAL.baseURL + "municipalHydrant/downATemplate";
      }

      /* 批量导入 */
      if(command == '2') {
        that.dialogTitleTwo = "导入Excel";
        that.dialogBaseInfoTwo = true;
      }

      /* 批量导出 */
      if(command == '3') {
        var curTbl = document.getElementById("tableView");
        var oXL;
        try{
          oXL = new ActiveXObject("Excel.Application"); //创建AX对象excel
        }catch(e){
          alert("无法启动Excel!\n\n如果您确信您的电脑中已经安装了Excel，"+"那么请调整IE的安全级别。\n\n具体操作：\n\n"+"工具 → Internet选项 → 安全 → 自定义级别 → 对没有标记为安全的ActiveX进行初始化和脚本运行 → 启用");
          return false;
        }
        var oWB = oXL.Workbooks.Add(); //获取workbook对象
        var oSheet = oWB.ActiveSheet;//激活当前sheet
        var sel = document.body.createTextRange();
        sel.moveToElementText(curTbl); //把表格中的内容移到TextRange中
        sel.select(); //全选TextRange中内容
        sel.execCommand("Copy");//复制TextRange中内容
        oSheet.Paste();//粘贴到活动的EXCEL中
        oXL.Visible = true; //设置excel可见属性
        var fname = oXL.Application.GetSaveAsFilename("市政消火栓.xls", "Excel Spreadsheets (*.xls), *.xls");
        oWB.SaveAs(fname);
        oWB.Close();
        oXL.Quit();
      }
    },
    //数据转换
    formatStatus: function(row) {
      return row.status == 0 ? "可用" : "不可用";
    }
  }
}
</script>
